<template>
    <div class="box2">
        <div class="title">
            <div style="display: flex;align-items: center">累计服务
                <bNumber v-for="item, index in total" :number="item" :key="index" time="1.8s" :size="40">
                </bNumber>
                <span> 人次</span>
            </div>
            <!-- <div class="radio">
                <el-radio-group v-model="search">
                    <el-radio-button label="日" value="day" />
                    <el-radio-button label="周" value="weak" />
                    <el-radio-button label="月" value="month" />
                    <el-radio-button label="年" value="year" />
                    <el-radio-button label="全部" value="all" />
                </el-radio-group>
            </div> -->
        </div>
        <div class="outbox1">
            <Box v-for="item in boxlist" :key="item.prop" :title="item.label" :disc="data[item.prop] + ''"
                :unit="item.unit" :color="item.color">
            </Box>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, Ref, ref } from "vue";
import Box from "./_box2.vue";
import bNumber from "../widget/b_number.vue";
import { ElRadioButton, ElRadioGroup } from "element-plus";
import { REANIMATIONTIME } from "@b/model/enum";
import { Http } from "@b/model/base/http";
import { cloneDeep } from "lodash";

const boxlist = [
    // {
    //     label: '累计服务总人数', prop: 'servicedTotalPerson', unit: '人数', color: '#00c4ef'
    // }, {
    //     label: '诊中服务人数', prop: 'servicingTotalPerson', unit: '人数', color: '#00e462'
    // },
    {
        label: '双向转诊服务人数', prop: 'transferTotalPerson', unit: '人数', color: '#87ceff'
    },
    //  {
    //     label: '累计服务总金额', prop: 'servicedTotalMoney', unit: '元', color: '#fca63b'
    // },
    // {
    //     label: '诊中服务金额', prop: 'servicingTotalMoney', unit: '元', color: '#fff4ae'
    // }, 
    {
        label: '双向转诊服务金额', prop: 'transferTotalMoney', unit: '元', color: '#fbe744'
    }]
const data: Ref<{ [key: string]: string }> = ref({})
const search = ref('all')
let timer: any = null
let timer1: any = null
const total = ref('')
const render = async () => {
    const res = await new Http().request('/v1/bigscreen/GetAnalyseInfo', { method: 'GET', cache: true })
    if (res) {
        data.value = {}
        await nextTick()
        const r = cloneDeep(res)
        r.servicedTotalPerson += 816
        r.transferTotalPerson += 816
        // r.servicedTotalPerson += 816 + 22 + 9 + 2
        // r.transferTotalPerson += 816 + 22 + 9 + 2
        r.servicedTotalMoney += 100000
        r.transferTotalMoney += 100000
        data.value = r
    }
}
const render1 = async () => {
    total.value = ''
    await nextTick()
    // total.value = data.value.servicedTotal + ''
    total.value = data.value.transferTotalPerson + ''
}
onMounted(async () => {
    await render()
    render1()
    timer = setInterval(() => {
        render()
    }, REANIMATIONTIME);
    timer1 = setInterval(() => {
        render1()
    }, 10000);
})
onUnmounted(() => {
    clearInterval(timer)
    clearInterval(timer1)
})
</script>

<style scoped>
.box2 {
    display: flex;
    flex-direction: column;
    font-size: 1.4em;
}

.title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    padding: 0 30px 40px;
}

/* .outbox1 {
    flex-grow: 1;
    display: grid;
    color: var(--color-white);
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
} */

.outbox1 {
    flex-grow: 1;
    display: grid;
    color: var(--color-white);
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 80px 0;
}
</style>